<template>
  <div class="goods_list">
    <div class="goods_item" v-for="item in goodslist" :key="item.id">
      <router-link :to="{name: 'goods_info', params: {id: item.id}}">
        <img :src="APIBaseURL + item.img" />
        <span class="goods_name">{{ item.name }}</span>
        <p class="goods_info">
          <span class="goods_price">¥{{ item.price }}</span>
          <span class="goods_num">剩余 {{ item.num }} 件</span>
        </p>
      </router-link>
    </div>
    <mt-button class="more" v-if="goodslist.length !== 0" size="large" @click="onClickGetMore">加载更多</mt-button>
  </div>
</template>

<script>
import {HTTPGetGoodsList} from "@/api/goods.js"
export default {
  data () {
    return {
      goodslist: [],
      //last_id: 0
      pageSize:6,
      pageIndex:1,
    }
  },
  props: ['category_id'],
  created () {
    this.getGoodsList()
  },
  methods: {
    async getGoodsList () {

      let params = { category_id: this.category_id, pageIndex:this.pageIndex, pageSize:this.pageSize }
      try {
        let result = await HTTPGetGoodsList(params)
        if(result.code == 1){
          if(result.data.length > 0){
            this.goodslist = this.goodslist.concat(result.data)
            //this.last_id = result.data[result.data.length - 1].id
          }else if (this.goodslist.length > 0) {
            this.$toast('已经到达底部')
          } else {
            this.$toast('列表为空')
          }
        }else{
          throw result.msg;
        }
      } catch (error) {
        this.$messagebox("错误",error)
      }
    },//===================================================
    onClickGetMore () {
      this.pageIndex ++;
      this.getGoodsList()
    }
  }
}
</script>

<style lang="scss" scoped>
.goods_list {
  background-color: rgb(231, 231, 235);
  display:flex;
  flex-wrap: wrap;
  padding-left: 10px;
  .goods_item {
    width: calc(calc(100%/2) - 10px);    
    margin: 10px 10px 0 0;
    background: #fff;
    display: flex;
    flex-direction:column;
    justify-content:space-around;
    border-radius: 10px;
    padding: 10px;
    background-color: rgb(237, 243, 243);
    img {
      width: 100%;
    }
    .goods_name {
      font-size: 14px;
      color: #333;
      margin: 10px 0;
    }
    .goods_info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0;
      .goods_price {
        color: red;
        font-weight: bold;
        font-size: 16px;
      }
      .goods_num {
        font-size: 13px;
      }
    }
  }
  .more {
    margin: 15px 0;
    font-size: 14px;
  }
}
</style>
